<template>
  <div class="comp-bar">
    <slot></slot>

    <el-collapse :value="collapseArr">
      <el-collapse-item v-for="(part, index) in compBarConfig.parts" :key="part.title" :title="part.title"
        :name="index">
        <draggable class="comp-bar-part-grid" :sort="part.sortable" :disabled="!part.draggable"
          :style="comp_bar_part_grid_style" :list="part.formItems" chosen-class="chosen" animation="200"
          @end="onDragEnd" :group="{ name: 'components', pull: 'clone', put: false }" :clone="cloneItem">
          <div v-for="(item) in part.formItems" :key="item.key">
            <i class="fa" :class="[item.icon]"></i> <span style="padding-left: 2px;">{{ item.title }}</span>
          </div>
        </draggable>
      </el-collapse-item>
    </el-collapse>


  </div>
</template>
<script>

export default {
  data() {
    return {
      drag: false
    }
  },
  methods: {
    cloneItem(orginalItem) {
      // console.log('orginalItem',orginalItem)
      // 克隆组件配置时，必须重置key 
      return orginalItem.deepClone()

    },
    onDragEnd(e) {
    },
    formatStyle(formConfig = {}) {
      return {
        gridTemplateColumns: `repeat(${formConfig.cols ?? 1}, 1fr)`,
        rowGap: formConfig.rowGap,
        columnGap: formConfig.columnGap
      }
    }
  },

  computed: {
    collapseArr() {
      return this.compBarConfig.parts.map((_,i) => i)
    },
    comp_bar_part_grid_style() {
      return this.formatStyle(this.compBarConfig)
    }
  },

  mounted() {

  },
  props: {
    compBarConfig: {
      default() {
        return { parts: [] }
      }
    }
  }
}
</script>
<style scoped lang="less">
.comp-bar {
  ::v-deep(.comp-bar-part-grid) {
    display: grid;

    >* {
      background-color: #f1f2f3;
      padding: 5px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid transparent;

      &:hover {
        border-color: #3498ff;
      }
    }
  }
}
</style>
